;(function () {
  var channelMoudle = Vue.extend({
    props: {
      code: {
        default: '',
        type: String
      },
      value: {
        default: '',
        type: String
      }
    },
    template: `<div class="channelMoudle relative">
      <div class="channelMoudle-input">
        <input type="text" class="form-control" v-model="keyword" @input="getdata($event)" />
      </div>
      <div class="channelMoudle-drap" v-if="flag">
        <div class="drap-li" v-for="item in data" @click="emitEvent(item)">{{item.dictName}}</div>
      </div>
    </div>`,
    data: () => ({
      keyword: '',
      flag: false,
      data: []
    }),
    watch: {
      code (val, newval) {
        this.keyword = '';
      },
      value (val) {
        this.keyword = val
      }
    },
    methods: {
      getdata (e) {
        if (!this.code) {
          this.keyword = '';
          hl.toast('请先选择分类')
          return
        }
        if (!this.keyword) {
          if (!e.data) return;
          this.keyword = e.data;
        }
        let data = {code: '#', name: this.keyword}
        this.$emit('on-change', data)
        hlhttp.get({
          url: 'configure/channel_matching',
          data: {
            channel_category_code: this.code,
            chennel_name: this.keyword
          },
          success: (res) => {
            if (res.length) {
              this.flag = true
            }
            this.data = res
          }
        })
      },
      //获取渠道名称
      getChannelName () {
        hlhttp.get({
          url: 'configure/dict',
          data: {module_code: 'ZHSH', config_name: 'ZS_CHANNEL_NAME', parent_dict_code: this.code},
          success: (res) => {
            if (res.length) {
              this.flag = true
            }
            this.data = res
          }
        })
      },
      emitEvent (item) {
        this.keyword = item.dictName
        let data = {code: item.dictCode, name: item.dictName}
        this.flag = false
        this.$emit('on-change', data)
      }
    },
    created () {
      if (this.value) {
        this.keyword = this.value
        return
      }
    },
    mounted () {
      document.addEventListener('click', (e) => {
        if (!this.$el.contains(e.target)) {
          this.flag = false
        }
      })
    }
  })

  Vue.component('web-channel', channelMoudle);

} ())
